<template>
    <div style="margin: 20px 100px;">
        <button @click="addModel">添加饮水机</button>
        <button @click="changeModel">改变颜色</button>
    </div>
    <div id="webgl3"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'

/** 1.创建场景对象Scene*/
var scene = new THREE.Scene();

onMounted(()=>{

    var loader = new FBXLoader();
    loader.load('/static/model/空间建模.fbx',function (obj) {
        obj.scale.set(0.4,0.4,0.4,0.4);//网格模型缩放
        obj.children[0].material.color.set(0xeeeeee); // 设置其中一个网格模型的颜色
        scene.add(obj);
    })


    /** 3.光源设置 */
    // 平行光
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
    directionalLight.position.set(0, 100, 100);
    // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
    // directionalLight.target = mesh;
    scene.add(directionalLight);
    // DirectionalLightHelper：可视化平行光
    // const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5,0xff0000);
    // scene.add(dirLightHelper);


    /** 4.相机设置 */
    var width = 1200; //窗口宽度
    var height = 800;
    var k = width/height;
    var s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(-200, 200, 0);// 设置相机位置
    camera.lookAt(scene.position); //设置相机方向（指向的场景对象）

    /**4.创建的渲染对象 */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.getElementById('webgl3').appendChild(renderer.domElement);

    renderer.render(scene, camera);

    // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    var axisHelper = new THREE.AxesHelper(450);
    scene.add(axisHelper);

    /**鼠标操作 */
    function render() {
        renderer.render(scene,camera);//执行渲染操作
        requestAnimationFrame(render);
    }
    render();
    new OrbitControls(camera, renderer.domElement);//创建控件对象

})

const addModel = ()=>{
    var loader2 = new OBJLoader();
    loader2.load('/static/model/小音箱.obj',function (obj) {
        obj.position.set(28,0,-176)
        obj.scale.set(200,200,200);//网格模型缩放
        obj.children[0].material.color.set(0x00ff00);// 设置其中一个网格模型的颜色
        scene.add(obj);
    })

    var loader3 = new OBJLoader();
    loader3.load('/static/model/小音箱.obj',function (obj) {
        obj.position.set(54,0,-80)
        obj.scale.set(200,200,200);//网格模型缩放
        obj.children[0].material.color.set(0xff0000);// 设置其中一个网格模型的颜色
        scene.add(obj);
    })

    var loader4 = new OBJLoader();
    loader4.load('/static/model/小音箱.obj',function (obj) {
        obj.position.set(5,0,146)
        obj.scale.set(200,200,200);//网格模型缩放
        obj.children[0].material.color.set(0x0000ff);// 设置其中一个网格模型的颜色
        scene.add(obj);
        // obj.addEventListener('click',()=>{
        //     alert('11')
        // })
    })

}

const changeModel = ()=>{
        // scene.children[7].traverse(item=>{
        //     if(item instanceof THREE.Mesh){
        //         if(Array.isArray(item.material)){
        //             item.material.forEach(a=>{
        //                 a.dispose()
        //             })
        //         }else{
        //             item.material.dispose()
        //         }
        //         item.geometry.dispose()
        //     }
        //     item = null
        // })

        scene.remove(scene.children[7])

        var loader5 = new OBJLoader();
        loader5.load('/static/model/小音箱.obj',function (obj) {
            obj.position.set(5,0,146)
            obj.scale.set(200,200,200);//网格模型缩放
            obj.children[0].material.color.set(0xffffff);// 设置其中一个网格模型的颜色
            scene.add(obj);
        })
    }

</script>

<style lang="scss" scoped>

</style>